<template>
    <div class="dish" >
        <h2><input type="text" v-model="item.dishName"></h2>
        <button class="shanchu" @click="shanchu">删除</button>
        <br>
        <van-field  label="图片：" /> <van-uploader v-model="fileList" :after-read="afterRead" :max-count="1"/>
        <!-- <label for="">图片： <van-uploader v-model="fileList" :after-read="afterRead" :max-count="1"/></label> -->
        <van-field v-model="item.dishDescription" label="介绍：" />
        <van-field v-model="item.dishPrice" label="价格：" />
        <button class="save" @click="save">保存</button>
        <hr>
      </div>
</template>

<script>
  import { updateDish, deleteDish,getOneDish } from "@/api/shangjia/dish";
export default {
    data() {
        return {
    fileList: [],
      dishImg:[],
      touImg:'',
      postImg:"",
        }
    },
    props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  created(){
   this.getdishImg();
  //  console.log('数据',this.item);
  },
    methods: {
        //获取单个数据方法
       async getdishImg(){
        await getOneDish(this.item.dishId).then((res)=>{
         this.touImg=res.data.dishPicture;
         this.fileList.push({ url:  this.touImg,isImage: true  });
      // console.log(err);
    })
        },
      shanchu() {
        deleteDish(this.item.dishId).then(() => {
          location.reload();
        });
      },
      afterRead(file) {
    this.postImg=file.file
    // console.log(this.postImg);
    },
      save() {
        if(this.item.dishName==''||this.item.dishDescription=='' ||this.item.dishPrice=='' ){
          this.$toast('输入内容不能为空');
          return
        }
        if(this.postImg==''){
          this.$toast('请重新选择菜品图片')
          return
        }

        updateDish(this.item.dishId,
          this.item.dishName,
          this.postImg,
          this.item.dishDescription,
          parseInt(this.item.dishPrice)).then(() => {
            this.$toast('保存成功')
        }).catch((err)=>{
          this.$toast(err)
        })
      },
    }
}
</script>

<style lang="less" scoped>

.dish{
    background-color: white;
    border-radius: 30px;
    margin-top: 20px;
    h2{
        margin-top: 10px;
        margin-left: 10px;
        display: block;
        width: 150px;
        input{
            width: 100%;
            background-color: white;
            border: none;
        }
    }
    .shanchu{
      width: 14.66667vw;
    height: 8vw;
    left: 80%;
    position: relative;
    display: block;
    margin-top: -4.73333vw;
    background-color: red;
    border: none;
    color: aliceblue;
    border-radius: 8vw;
    }
    .change{
        width: 60px;
        height: 30px;
        left: 80%;
        position: relative;
        display: block;
        margin-top: -49px;
        background-color: rgb(16, 131, 253);
        border: none;
        color: aliceblue;
        border-radius: 30px;
    }
    label{
        // display: block;
        margin-left: 17px;
      //  margin-top: 10px;
       color: #646566;
    }
}
.save{
    width: 60px;
        height: 30px;
        left: 80%;
        position: relative;
        display: block;
        margin-top: -49px;
        background-color: rgb(16, 131, 253);
        border: none;
        color: aliceblue;
        border-radius: 30px;
}
.van-field__control{
    word-break: break-all;
}
.van-cell{
    background-color: white;
}
.van-uploader{
  margin-left: 120px;
  margin-top: -50px;
}
</style>